<template>
	<div id="MovieTab">
		<ul>
			<router-link tag="li" :to="{
				path:'/movie/city'
			}">
				<p>{{address}}<i class="fa fa-caret-down"></i></p>
			</router-link>
			<router-link tag="li" :to="{
				path:'/movie/now'
			}">
				<p>正在热映</p>
			</router-link>
			<router-link tag="li" :to="{
				path:'/movie/coming'
			}">
				<p>即将上映</p>
			</router-link>
			<router-link tag="li" :to="{
				path:'/movie/serach'
			}">
				<i class="fa fa-search"></i>
			</router-link>
		</ul>
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name: "MovieTab",
		data() {
			return {
				city: "北京"
			}
		},
		computed: {
			address() {
				this.$bus.$on('hello', (data) => {
					this.city = data
				})
				return this.city
			}
		}
	}
</script>

<style scoped>
	#MovieTab {
		padding-top: 50px;
		margin: 0;
	}

	ul {
		display: flex;
		height: 50px;
		justify-content: space-around;
		border-bottom: #CCC solid 1px;
	}

	ul li p {
		font-weight: bold;
		height: 49px;
		line-height: 50px;
		padding-left: 10px;
		padding-right: 10px;
	}

	ul li>i {
		font-size: 25px;
		color: #E54847;
	}

	ul li p>i {
		padding-left: 5px;
	}

	ul .router-link-active {
		color: #e54847 !important;
	}

	ul li:hover {
		border-bottom: #E54847 solid 2px;
	}

	ul li:nth-child(2),
	ul li:nth-child(3) {
		color: #999999;
	}

	ul li:nth-child(4) {
		line-height: 50px;
	}
</style>
